<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <span>hello</span>
    <div class="box" id="cont" title="这是title" abc="这是自定义的abc属性">
        <span>1</span>
        hello
        <!-- 这是注释 -->
    </div>
    <span>world</span>
</body>
<script>
    
    // 其他节点选择都是根据关系选择

    var obox = document.getElementById("cont");

    console.log(obox);

    // 所有子节点选择器
    console.log(obox.childNodes);

    // 第一个子节点
    console.log(obox.firstChild);

    // 最后一个子节点
    console.log(obox.lastChild);

    // 上一个兄弟节点
    console.log(obox.previousSibling);

    // 下一个兄弟节点
    console.log(obox.nextSibling);

    // 属性节点选择器
    console.log(obox.attributes);

    // 根节点选择器
    console.log(document);

</script>
</html>